<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
        为开发者 提供 在页面中进行 特殊功能的属性描述方法的调用
            - 语法：Vue指令以 v-名称 结构定义
            - 位置：指令只能被用于 html 容器的标签属性上   <标签 v-指令="" ></标签>
            - 实现：指令本身实际上就是一个JS方法的特殊封装，页面定义的指令只是对方法的调用和触发
            - 功能：通过指令可实现 HTML标签写入，标签判断、标签循环、标签事件绑定、标签属性绑定……
            - 取值范围：普通指令 取值范围 和 插值表达一致
        -->
        <!-- 
        1、v-text
            - 取值：string
            - 功能：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
            - 示例：<span v-text="msg"></span>
        2、v-html
            - 取值：string
            - 功能：更新元素的 innerHTML 
            - 示例：<div v-html="html"></div>
        -->
        <!-- v-text 和 插值表达的区别在于 一个进行内容覆盖，一个进行内容拼接 -->
        <h3>strHtml:{{ strHtml }}</h3>
        <h3 v-text=" strHtml ">strHtml</h3>
        <!--  v-text 和 v-html 的区别在于 一个会对内容进行标签解析，一个不会 -->
        <h3 v-html=" strHtml ">strHtml</h3>
        <hr>
        <h3 v-html=" '标签字符串格式写入:'+strHtml "></h3>
        <h3 v-html=" flag?'flag变量取值为\'true\'':'flag变量取值为\'false\'' "></h3>
        <h3 v-html=" flag?`flag变量取值为'true'`:`flag变量取值为'false'` "></h3>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            strHtml:"<span style='color:red'>字符串形式的标签</span>",
            flag:false
        }
    })
</script>
</html>